<template>
  <div class="lawyer-platform" :style="{ background: datas.template_bg }">
    <div class="lawyer" v-for="(item, i) in listData" :key="i">
      <img :src="item.avatar_image" @click="to('lawyer', item)" />
      <div class="info">
        <div style="flex:1">
          <div class="header">
            <span class="name" :style="{ color: datas.name_color }">{{ item.name }}</span>
            <span :style="{ color: datas.job_color }">{{ item.title }}</span>
          </div>
          <div class="lawyer-detail">
            <span class="life" :style="{ color: datas.year_color }">职业{{ item.year }}年</span>
            <span class="domain-nickName" v-for="(category, index) in item.category_data" :key="index" :style="{ borderRadius: datas.box_radius+'px', background: datas.field_bg }">{{
              category.title
            }}</span>
          </div>
          <div class="footer" @click.stop="to('office', item)">
            <div>
              <span :style="{ color: datas.city_color }">{{ item.city_name }}</span>
              |
              <span :style="{ color: datas.office_color }">
                <template v-if="lawfirmName" :style="{ color: datas.office_color }">{{ lawfirmName }}</template>
                <template v-else> {{ item.lawyer_firm ? item.lawyer_firm.name : "" }} </template>
              </span>
            </div>
            <div :style="{ color: datas.distance_color }">{{ item.distance }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["isBottom", "lastIndex", "index", "page_id", "id", "datas", "component_key", "tabcontrol", "isLast", "plugin_active", "childComponent", "childStyle", "leftShow"],
  data() {
    return {
      listData: [],
      point: {
        lng: "",
        lat: ""
      },
      path: "",
			category_id:[]
    };
  },
  mounted() {
		if(this.page_id == 69){
			this.category_id = [7,8,9]
		}
    this.path = this.$route.path;
    if (JSON.parse(localStorage.getItem("myLocation"))) {
      let myLocation = JSON.parse(localStorage.getItem("myLocation"));
      this.point.lng = myLocation.point.lng;
      this.point.lat = myLocation.point.lat;
    } else {
      this.fun
        .getLocation()
        .then(res => {
          this.point.lng = res.point.lng;
          this.point.lat = res.point.lat;
        })
        .catch(err => {
          console.log(err);
        });
    }
    this.getData();
  },
  methods: {
    to(type, data) {
      if (type == "lawyer") {
        this.$router.push(this.fun.getUrl("lawyerDetail", { id: data.id }, { order_type: "lawyer" }));
      } else {
        this.$router.push(this.fun.getUrl("lawyerDetail", { id: data.lf_id }, { order_type: "office" }));
      }
    },
    getData() {
      let url = "";
      if (this.path == "/home" || this.path == "/newDiy") {
        url = "home-page.index";
      } else {
        url = "member.member.member-data";
      }
      $http.post(url, this.point).then(res => {
        if (res.result == 1) {
          if (url == "home-page.index") {
            res.data.item.datas.forEach(items => {
              if (items.component_key == "U_lawyer") {
                if (items.remote_data.get_number) {
                  this.listData = items.remote_data.list.slice(0, items.get_number);
                } else {
                  this.listData = items.remote_data.list;
                }
              }
            });
          } else {
            res.data.designer.data.datas.forEach(item => {
              if (item.component_key == "U_lawyer") {
                if (item.remote_data.get_number) {
                  this.listData = item.remote_data.list.slice(0, item.get_number);
                } else {
                  this.listData = item.remote_data.list;
                }
              }
            });
          }
        }

        // console.log(res.data.item.datas)
      });
      console.log(this.listData);
    }
  }
};
</script>

<style lang="scss" scoped>
.footer{
  display: flex;
  justify-content: space-between;
}
.header {
  display: flex;
  justify-content: space-between;
}
.lawyer {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.name {
  font-size: 1.1428rem;
}
.btn {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background-color: #ffffff;
  box-shadow: 0px -2px 7px 0px rgba(213, 213, 213, 0.59);
  padding: 0.5714rem 1.7857rem;
  /deep/ .van-button--normal {
    width: 100%;
    border-radius: 0.3571rem;
  }
}
.mr-1 {
  margin-right: 1rem;
}
.life {
  margin-right: 0.325rem;
  color: #6b6b6b;
}
.domain-nickName {
  width: 3.5714rem;
  border: 1px solid #f5b435;
  border-radius: 2px;
  text-align: center;
  color: #f5b435;
  font-size: 0.7142rem;
  margin-right: 0.242rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
}
.flex {
  display: flex;
}
.between {
  justify-content: space-between;
}
/deep/ .van-tabs__line {
  background-color: #daa032;
}
/deep/ .van-tab--active {
  color: #daa032 !important;
}
.operators {
  background-color: #fff;
  height: 100%;
  padding-bottom: 5rem;
}
.info {
  width: 100%;
  text-align: left;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
}
.c-6b6b6b {
  color: #6b6b6b;
}
.contact-way {
  color: #6b6b6b;
  font-size: 0.8rem;
}
.title {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lawyer-title {
  color: #daa032;
  font-size: 0.857rem;
}
div.item {
  display: flex;
  padding-left: 0.714rem;
}
img {
  margin: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 100px;
  object-fit: cover;
  border: 1px solid #fff;
  margin-right: 0.328rem;
}
.lawyer-detail {
  margin-top: 0.857rem;
  display: flex;
  flex-wrap: wrap;
}
</style>
